<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>广场</title>
        <!-- Favicons -->
        <link href="../static/assets/img/tubiao.png" rel="icon">
        <link rel="stylesheet" href="../static/assets/css/style_detail.css">


            <!-- Vendor CSS Files -->
        <link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
        <link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
        <link href="../static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
        <link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
        <link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">

        <!-- Template Main CSS File -->
        <link href="../static/assets/css/style.css" rel="stylesheet">

        <style>
            .comment {
                border: 1px solid #ccc;
                padding: 10px;
                margin-bottom: 10px;
            }

            .username {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 5px;
            }

            .reply-btn {
                font-size: 15px;
                font-style: italic;
                background-color: transparent;
                border: none;
                cursor: pointer;
                color: #007bff;
                padding: 0;
            }

            .comment-content {
                display: flex;
                align-items: flex-start;
            }

            .user-avatar {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .comment-details {
                flex: 1;
            }

            .content {
                padding-top: 7px;
                padding-bottom: 7px;
            }

            .time {
                padding-right: 100px;
                font-size: 14px;
                color: #888;
            }

            .publish-button {
                background-color: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                padding: 10px 20px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .publish-button:hover {
                background-color: #0056b3;
            }
        </style>
    </head>
    <body>
        <header id="header">


          <div class="logo float-left">
            <h1 class="text-light"><a><span>welcome to movies space</span></a></h1>
          </div>

          <nav class="nav-menu float-right d-none d-lg-block">
            <ul>
              <li><a href="/home/{{ username }}">首页</a></li>
              <li><a href="/movie_1/{{ username }}">电影</a></li>
                <li class="active"><a href="/squire/{{ username }}">广场</a></li>
              <li><a href="/data/{{ username }}">数据表</a></li>
              <li><a href="/about/{{ username }}">关于我们</a></li>
              <li><a href="/my/{{ username }}">{{ username }}</a></li>
            </ul>
          </nav><!-- .nav-menu -->

      </header><!-- End Header -->

        <div class="container">
             <div class="comment-section">
                    <h3 style="font-size: 29px;line-height: 1.1;letter-spacing: 0.478em;font-weight: 800;font-style: normal;">最新动态：</h3>
                             <!-- 发布动态按钮 -->
                    <button class="publish-button" onclick="window.location.href='/publish_squire/{{ username }}'" style="float: right; margin-bottom: 10px;">+  发布动态</button><br><br><br>
                    <div id="comments">
                        {% if squire %}
                            {% for comment in squire %}
                                <div id="{{ comment[0] }}" class="comment">
                                    <div class="comment-content">
                                        <img src="{{ comment[5] }}"  class="user-avatar" alt="头像加载失败">
                                        <div class="comment-details">
                                            {% if comment[1] == username %}
                                                <p class="username" style="padding-top: 11px;">{{ comment[1] }}</p>
                                            {% else %}
                                                <p class="username" style="padding-top: 11px;"><a href="/user/{{ username }}/{{ comment[1] }}" style="font-size: 18px;font-weight: 600;">{{ comment[1] }}</a></p>
                                                <button class="reply-btn" data-user="{{ comment[1] }}" user_comment_id="{{ comment[0] }}" style="font-size: 15px;line-height: 0.2;letter-spacing: 0.103em;font-weight: 400;font-style: italic;">回复</button>
                                            {% endif %}
                                            <p class="content" style="padding-top: 20px;padding-bottom: 7px;">{{ comment[3] }}</p>
                                            <p class="time">时间: {{ comment[4]}}</p>
                                            <button style="display: none;font-size: 21px;line-height: 0.3;letter-spacing: 0.044em;" class="expand-btn" commentId="{{ comment[0] }}">More</button>
                                        </div>
                                    </div>
                                    <div style="display: flex; flex-direction: column; align-items: center;">
                                          <img src="{{ comment[2] }}"  style="max-width: 512px; max-height: 508px; margin-top: 10px;">
                                    </div>
                                    <p class="time" style="padding-right: 100px;">时间: {{ comment[4]}}</p>
                                </div>
                            {% endfor %}
                        {% else %}
                            <p>暂时没有广场数据.</p>
                        {% endif %}
                    </div>
             </div>
            <!-- 弹出的评论输入框 -->
            <div id="commentModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <form id="replyForm" method="post">
                        <textarea id="replyContent" name="content" maxlength="100" placeholder="请输入您的回复评论"></textarea>
                        <input id="submitReplyBtn" type="submit" value="提交回复">
                    </form>
                </div>
            </div>
        </div>
    </body>
    <script>
        //评论时间格式化
        function formatDate(dateString) {
            var date = new Date(dateString + ' UTC');
            var year = date.getUTCFullYear();
            var month = String(date.getUTCMonth() + 1).padStart(2, '0');
            var day = String(date.getUTCDate()).padStart(2, '0');
            var hours = String(date.getUTCHours()).padStart(2, '0');
            var minutes = String(date.getUTCMinutes()).padStart(2, '0');
            var seconds = String(date.getUTCSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }


        // 创建一个函数，用于为回复按钮添加点击事件监听器
        function addReplyButtonClickListener() {
            var replyBtns = document.querySelectorAll('.reply-btn'); // 获取所有回复按钮
            replyBtns.forEach(function(replyBtn) {
                replyBtn.addEventListener('click', function() {
                // 获取 <span> 元素，用于关闭弹出框
                    const span = document.getElementsByClassName("close")[0];
                    var user_comment_id = this.getAttribute('user_comment_id');
                    var user = this.getAttribute('data-user');
                    document.getElementById('replyContent').value = '@' + user + ' '; // 在输入框中设置回复对象
                    // 将评论的ID存储在提交按钮中
                    document.getElementById('submitReplyBtn').setAttribute('user_comment_id', user_comment_id);
                    document.getElementById('commentModal').style.display = 'block'; // 显示评论输入框模态框
                    // 当点击 <span> (x), 关闭弹出框
                    span.onclick = function () {
                        document.getElementById("commentModal").style.display = "none";
                    }

                    // 当用户点击模态框之外的任何地方，关闭弹出框
                    window.onclick = function (event) {
                        if (event.target == document.getElementById("commentModal")) {
                            document.getElementById("commentModal").style.display = "none";
                        }
                    }
                });
            });
        }


        // 获取提交回复按钮元素
        var submitBtn = document.getElementById("submitReplyBtn");
        // 绑定点击事件监听器
        submitBtn.addEventListener("click", function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            // 获取回复内容
            var replyContent = document.getElementById("replyContent").value.trim();
            var user_comment_id = this.getAttribute('user_comment_id');
            // 检查回复内容是否为空
            if (replyContent === "") {
                alert("回复内容不能为空");
                return;
            }
            // 准备要发送的数据，以对象形式表示
            var data = {
                user_comment_id: user_comment_id,
                content: replyContent
            };
                // 将数据转换为 JSON 格式
            var jsonData = JSON.stringify(data);
            // 创建一个新的 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            // 设置请求的类型、URL 以及是否异步
            xhr.open("POST", "/submit_reply_squire/{{ username }}", true);
            // 设置请求头，声明数据为 JSON 格式
            xhr.setRequestHeader("Content-Type", "application/json");
            // 当请求完成时执行的函数
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 请求成功，处理返回的数据
                    alert('回复成功！');
                    window.location.reload();;
                    // 可以在这里执行一些成功提交后的操作，比如刷新评论区等
                } else {
                    alert('回复失败！');
                    window.location.reload();
                    // 请求失败，输出错误信息
                    console.error('请求失败: ' + xhr.statusText);
                }
            };
            // 当请求发生错误时执行的函数
            xhr.onerror = function () {
                console.error('请求错误');
            };
            // 发送请求并将 JSON 数据作为请求体发送给后端
            xhr.send(jsonData);
        });
        //初始调用绑定监听
        addReplyButtonClickListener();




        function listenLodeMore(){
            // 创建一个识别是否显示有更多按钮的函数
            fetch(`/get_is_squire_reply`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                for (var i = 0; i < data.length; i++) {
                    var comment = data[i];
                    var commentId = comment[0];

                    var commentElement = document.getElementById(commentId);
                    // 获取评论元素下的 expand-btn 按钮
                    var expandButton = commentElement.querySelector('.expand-btn');
                    //console.error('元素', commentElement);
                    //console.error('按钮', expandButton);
                    // 将按钮显示出来
                    expandButton.style.display = "block";
                }
            })
            .catch(error => {
            // console.error('There was a problem with the fetch operation:', error);
            });

            // 监听展开按钮的点击事件
            document.addEventListener('click', function(event) {
            // 检查点击的元素是否包含 'expand-btn' 类
                if (event.target.classList.contains('expand-btn')) {

                    var commentElementId = event.target.closest('.comment').id; // 获取评论元素的id
                    var expandButton = event.target.closest('.expand-btn'); // 获取展开按钮元素
                    //console.error("commentId：", commentElementId);
                    //console.error("expandButton：", expandButton);

                    loadSecondComments(commentElementId,expandButton); // 调用加载二次评论的函数，并传递 commentId 参数
                }
            });
        }

    // 初始调用listen函数
    listenLodeMore();
        // 创建一个函数，用于加载指定评论下的二次评论
        function loadSecondComments(commentId,expandButton) {
            // 发送请求获取指定评论下的二次评论数据，并将数据展示在页面上
            // 这里使用Fetch API发送GET请求，你需要根据你的后端接口进行相应的调整
            fetch(`/get_squire_reply?commentId=${commentId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');

                }
                return response.json();
            })
            .then(data => {
              // 在这里处理返回的数据，将二次评论显示在页面上
                var secondCommentsContainer = document.createElement('div');// 创建一个新的 <div> 元素作为二次评论的容器
                secondCommentsContainer.classList.add('second-comments');// 添加 CSS 类名 'second-comments' 到容器元素
                data.forEach(comment => {
                    var secondCommentElement = document.createElement('div');// 创建一个新的 <div> 元素作为单个二次评论的容器
                    secondCommentElement.classList.add('comment');// 添加 CSS 类名 'comment' 到二次评论容器
                    // 使用评论数据创建二次评论的 HTML 结构
                    secondCommentElement.innerHTML = `
                      <div class="user-info">
                                <img src="../${comment.avatar}" style="width: 50px; height: 50px; border-radius: 50%;">
                                <p class="username">${comment.username}</p>
                      </div>
                      <p class="content">${comment.content}</p>
                      <p class="time">时间: ${formatDate(comment.time)}</p>
                    `;
                    secondCommentsContainer.appendChild(secondCommentElement); // 将单个二次评论添加到二次评论容器中
              });
              // 将二次评论容器插入到指定评论下方
              var commentElement = document.getElementById(commentId); // 获取指定评论的元素
              commentElement.appendChild(secondCommentsContainer);// 将二次评论容器插入到指定评论的元素中
              // 隐藏展开按钮
              expandButton.style.display = "none";
            })
            .catch(error => {
              // console.error('There was a problem with the fetch operation:', error);
            });
        }
    </script>
</html>

